/* screen - index */

.index {
  align-items: center;
  background-color: var(--cod-gray-2);
  display: flex;
  flex-direction: column;
  height: 11010px;
  width: 1920px;
}

.index .flex-col {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 4777px;
  width: 1920px;
}

.index .frame-container {
  height: 1080px;
  position: relative;
  width: 1920px;
}

.index .frame-1171278833 {
  filter: blur(10px);
  height: 1080px;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 1920px;
}

.index .frame-1171278833.animate-enter22 {
  animation: animate-enter22-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0.3;
}

@keyframes animate-enter22-frames {
  from{opacity: 0.3;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.index .vector-3297-2 {
  cursor: pointer;
  height: 22px;
  left: 929px;
  position: absolute;
  top: 974px;
  transition: all 0.2s ease;
  width: 61px;
}

.index .vector-3297-2:hover {
  transform: translate(0, 20px);
}

.index .frame-1171278179 {
  align-items: flex-start;
  background-color: var(--black);
  border: 1px solid;
  border-color: var(--dove-gray);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 1px;
  height: 70px;
  left: 1811px;
  overflow: hidden;
  padding: 24.5px 14.5px;
  position: absolute;
  top: 970px;
  transform: rotate(-90.00deg);
  transition: all 0.2s ease;
  width: 70px;
}

.index .frame-1171278179:hover {
  background-color: #141414
}

.index .intuitive-design-and-experience {
  color: var(--white);
  font-family: var(--font-family-telegraf-regular);
  font-size: 80px;
  font-weight: 400;
  left: 201px;
  letter-spacing: -1.60px;
  line-height: normal;
  position: absolute;
  top: 346px;
}

.index .uiux-designer {
  color: #acacac;
  font-family: var(--font-family-telegraf-regular);
  font-size: 38px;
  font-weight: 400;
  left: 201px;
  letter-spacing: -0.76px;
  line-height: normal;
  top: 528px;
}

.index .text-68 {
  color: #acacac;
  font-family: var(--font-family-pretendard-regular);
  font-size: 35px;
  font-weight: 400;
  left: 477px;
  letter-spacing: -0.70px;
  line-height: normal;
  position: absolute;
  top: 527px;
  white-space: nowrap;
}

.index .frame-1171278180 {
  -webkit-backdrop-filter: blur(60px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(60px) brightness(100%);
  background-color: var(--black-2);
  border-radius: 23px;
  display: flex;
  gap: 915px;
  height: 70px;
  left: 40px;
  min-width: 1840px;
  padding: 11px 36px;
  position: absolute;
  top: 17px;
}

.index .group-1171278889:hover {
  filter: blur(5px);
}

.index .group-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  min-width: 100px;
  transition: all 0.5s ease;
}

.index .group-1:hover {
  transform: scale(1.1);
}

.index .frame-1171278180-1 {
  background-color: var(--granite-gray-2);
  border-radius: 42px;
  cursor: pointer;
  height: 46px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 107px;
}

.index .frame-1171278180-1:hover {
  background-color: #585858
}

.index .frame-11712781:hover {
  background-color: #383838
}

.index .about-me {
  left: 18px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.index .frame-1171278182:hover {
  background-color: #c5c5c5
}

.index .place {
  left: 24px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.index .overlap-group31 {
  height: 1872px;
  margin-top: 29px;
  position: relative;
  width: 1920px;
}

.index .ellipse-8181 {
  background-color: var(--cyan--aqua);
  border-radius: 332px;
  cursor: pointer;
  filter: blur(361.3px);;
  height: 664px;
  left: 628px;
  opacity: 0.08;
  position: absolute;
  top: 169px;
  transition: all 0.6s ease;
  width: 664px;
}

.index .ellipse-8181:hover {
  transform: scale(2);
}

.index .frame-1171278832 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 1872px;
  left: 0;
  padding: 169px 586px;
  position: absolute;
  top: 0;
  width: 1920px;
}

.index .frame-1171278694-1 {
  background-color: var(--shark-3);
  border-radius: 55px;
  cursor: pointer;
  height: 49px;
  opacity: 0.3;
  overflow: hidden;
  position: relative;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  width: 132px;
}

.index .frame-1171278694-1.animate-enter17 {
  animation: animate-enter17-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter17-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278694-1:hover {
  transform: scale(1.1);
}

.index .ui-design {
  left: 20px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 13px;
  white-space: nowrap;
}

.index .text-67 {
  letter-spacing: -2.24px;
  line-height: normal;
  margin-right: 1.0px;
  margin-top: 36px;
  min-height: 67px;
  min-width: 439px;
  text-align: center;
  white-space: nowrap;
}

.index .ui {
  letter-spacing: -0.72px;
  line-height: normal;
  margin-right: 6.0px;
  margin-top: 24px;
  min-height: 21px;
  min-width: 336px;
  text-align: center;
  white-space: nowrap;
}

.index .frame-1171278773 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-self: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  margin-top: 114px;
  opacity: 0;
  overflow: hidden;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.index .frame-1171278773.animate-enter21 {
  animation: animate-enter21-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter21-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278773:hover {
  background-color: #3e3e3e
}

.index .overlap-group4 {
  height: 626px;
  left: 20px;
  position: relative;
  top: 19px;
  width: 707px;
}

.index .overlap-group {
  height: 626px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.index .frame-1171278688 {
  border-radius: 19.49px;
  height: 390px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translate(0, 25px);
  width: 707px;
}

.index .frame-1171278688.animate-enter20 {
  animation: animate-enter20-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter20-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .overlap-group-6 {
  height: 568px;
  left: -25px;
  position: relative;
  top: -89px;
  width: 756px;
}

.index .frame-1171278694-2 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  left: 34px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  top: 100px;
  width: 87px;
}

.index .number {
  letter-spacing: 0;
  min-height: 15px;
}

.index .a24 {
  height: 568px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 756px;
}

.index .mobile-app-design {
  left: 94px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 413px;
  white-space: nowrap;
}

.index .ellipse-8183-2 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 138px;
  opacity: 0.11;
  position: absolute;
  top: 194px;
  width: 432px;
}

.index .frame-1171278687 {
  align-items: flex-start;
  border: 0.49px solid;
  border-color: var(--white);
  border-radius: 32.65px;
  display: flex;
  height: 22px;
  left: 8px;
  overflow: hidden;
  padding: 4.6px 15.7px;
  position: absolute;
  top: 458px;
  width: 83px;
}

.index .ui-design-1 {
  margin-left: 1px;
}

.index .vector-3297 {
  cursor: pointer;
  height: 29px;
  left: 664px;
  position: absolute;
  top: 413px;
  transition: all 0.4s ease;
  width: 29px;
}

.index .vector-3297:hover {
  transform: rotate(45deg);
}

.index .exclude {
  height: 27px;
  left: 9px;
  position: absolute;
  top: 413px;
  width: 67px;
}

.index .frame-1171278772 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-self: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  margin-top: 103px;
  opacity: 0.3;
  overflow: hidden;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.index .frame-1171278772.animate-enter19 {
  animation: animate-enter19-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter19-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278772:hover {
  background-color: #3E3E3E
}

.index .overlap-group-1 {
  height: 625px;
  left: 19px;
  position: relative;
  top: 20px;
  width: 707px;
}

.index .overlap-group-2 {
  height: 625px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.index .frame-1171278688-1 {
  border-radius: 19.53px;
}

.index .frame-1171278688-1.animate-enter18 {
  animation: animate-enter18-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter18-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .overlap-group-7 {
  height: 470px;
  left: 3px;
  position: relative;
  top: -39px;
  width: 703px;
}

.index .epiphone {
  height: 470px;
  left: 0;
  object-fit: cover;
  top: 0;
  transition: all 0.5s ease;
  width: 703px;
}

.index .epiphone:hover {
  transform: scale(1.1);
}

.index .frame-1171278694-3 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  left: 6px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  top: 49px;
  width: 87px;
}

.index .mobile-app-design-1 {
  left: 117px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 413px;
  white-space: nowrap;
}

.index .ellipse-8183-3 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 139px;
  opacity: 0.11;
  position: absolute;
  top: 193px;
  width: 432px;
}

.index .frame-1171278687-1 {
  align-items: flex-end;
  border: 0.49px solid;
  border-color: var(--white);
  border-radius: 32.71px;
  display: flex;
  height: 22px;
  left: 9px;
  overflow: hidden;
  padding: 4.9px 15.7px;
  position: absolute;
  top: 458px;
  width: 83px;
}

.index .vector-3297-1 {
  cursor: pointer;
  height: 29px;
  left: 665px;
  position: absolute;
  top: 413px;
  transition: all 0.4s ease;
  width: 29px;
}

.index .vector-3297-1:hover {
  transform: rotate(45deg);
}

.index .overlap-group29 {
  height: 827px;
  margin-left: 2.0px;
  margin-top: 67px;
  position: relative;
  width: 1524px;
}

.index .ellipse-8182 {
  background-color: var(--cyan--aqua);
  border-radius: 332px;
  cursor: pointer;
  filter: blur(361.3px);;
  height: 664px;
  left: 429px;
  opacity: 0.08;
  position: absolute;
  top: 17px;
  transition: all 0.6s ease;
  width: 664px;
}

.index .ellipse-8182:hover {
  transform: scale(2);
}

.index .frame-1171278695 {
  background-color: var(--shark-3);
  border-radius: 55px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  left: 618px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: 132px;
}

.index .frame-1171278695.animate-enter5 {
  animation: animate-enter5-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter5-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.index .frame-1171278695:hover {
  transform: scale(1.1);
}

.index .frame-1171278696 {
  align-items: flex-start;
  background-color: var(--shark-3);
  border-radius: 55px;
  display: flex;
  height: 49px;
  left: 771px;
  overflow: hidden;
  padding: 13px 16px;
  position: absolute;
  top: 0;
  width: 132px;
}

.index .ux-design-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 4px;
  min-height: 21px;
  white-space: nowrap;
}

.index .text-6 {
  left: 631px;
  letter-spacing: -0.72px;
  line-height: 25px;
  opacity: 0.3;
  position: absolute;
  text-align: center;
  top: 164px;
  transform: translate(0, 25px);
}

.index .text-6.animate-enter7 {
  animation: animate-enter7-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter7-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .text-9 {
  left: 574px;
  letter-spacing: -2.24px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 74px;
  white-space: nowrap;
}

.index .frame-1171278769 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  left: 0;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 309px;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.index .frame-1171278769.animate-enter11 {
  animation: animate-enter11-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter11-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278769:hover {
  background-color: #3E3E3E
}

.index .ellipse-8183-4 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 138px;
  opacity: 0.11;
  position: absolute;
  top: 193px;
  width: 432px;
}

.index .frame-container-1 {
  border-radius: 19.53px;
  height: 390px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.index .frame-1171278688-2 {
  border-radius: 19.53px;
}

.index .frame-1171278688-2.animate-enter10 {
  animation: animate-enter10-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter10-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .overlap-group-8 {
  height: 564px;
  left: -23px;
  position: relative;
  top: -38px;
  width: 764px;
}

.index .artaloo {
  height: 564px;
  left: 95px;
  object-fit: cover;
  top: 0;
  transition: all 0.4s ease;
  width: 564px;
}

.index .artaloo:hover {
  transform: scale(1.1);
}

.index .frame-1171278694 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  left: 9px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  top: 10px;
  width: 87px;
}

.index .frame-1171278690 {
  align-items: flex-end;
  border: 0.5px solid;
  border-color: var(--white);
  border-radius: 32.71px;
  display: flex;
  height: 22px;
  left: 107px;
  overflow: hidden;
  padding: 4.9px 13.9px;
  position: absolute;
  top: 458px;
  width: 83px;
}

.index .x33 {
  border-radius: 32.71px;
  left: 9px;
  padding: 4.9px 15.7px;
  top: 458px;
}

.index .frame-1171278770 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-end;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 518px;
  left: 777px;
  overflow: hidden;
  padding: 0 20.0px;
  position: absolute;
  top: 309px;
  transition: all 0.2s ease;
  width: 747px;
}

.index .frame-1171278770:hover {
  background-color: #3E3E3E
}

.index .overlap-group5 {
  height: 625px;
  margin-bottom: -127.0px;
  position: relative;
  width: 707px;
}

.index .ellipse-8183-5 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 137px;
  opacity: 0.11;
  position: absolute;
  top: 193px;
  width: 432px;
}

.index .frame-container-2 {
  border-radius: 19.51px;
  height: 390px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.index .frame-1171278688-3 {
  border-radius: 19.51px;
}

.index .frame-1171278688-3.animate-enter12 {
  animation: animate-enter12-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter12-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .tong {
  cursor: pointer;
  height: 471px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: -41px;
  transition: all 0.4s ease;
  width: 707px;
}

.index .tong:hover {
  transform: scale(1.1);
}

.index .frame-1171278690-1 {
  align-items: flex-end;
  border: 0.5px solid;
  border-color: var(--white);
  border-radius: 32.68px;
  display: flex;
  height: 22px;
  left: 106px;
  overflow: hidden;
  padding: 4.9px 13.9px;
  position: absolute;
  top: 457px;
  width: 83px;
}

.index .x33-1 {
  border-radius: 32.68px;
  left: 8px;
  padding: 4.9px 15.7px;
  top: 457px;
}

.index .frame-1171278771 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-end;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 518px;
  margin-right: 1.0px;
  margin-top: 57px;
  overflow: hidden;
  padding: 0 19.1px;
  transition: all 0.2s ease;
  width: 747px;
}

.index .frame-1171278771:hover {
  background-color: #3E3E3E
}

.index .overlap-group7 {
  height: 626px;
  margin-bottom: -127.0px;
  margin-left: 2px;
  position: relative;
  width: 707px;
}

.index .ellipse-8183-6 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 137px;
  opacity: 0.11;
  position: absolute;
  top: 194px;
  width: 432px;
}

.index .frame-1171278688-4 {
  background-color: var(--white);
  border-radius: 19.42px;
}

.index .frame-1171278688-4.animate-enter13 {
  animation: animate-enter13-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter13-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .group-1171278888:hover {
  transform: scale(1.1);
}

.index .overlap-group-9 {
  height: 412px;
  position: relative;
  width: 518px;
}

.index .sanghsin {
  height: 411px;
  left: 106px;
  object-fit: cover;
  position: absolute;
  top: 1px;
  width: 412px;
}

.index .frame-1171278694-4 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  left: 98px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  top: 78px;
  width: 87px;
}

.index .x33-2 {
  border-radius: 32.54px;
  left: 7px;
  padding: 4.9px 15.2px;
  top: 455px;
}

.index .vector-3297-3 {
  cursor: pointer;
  height: 29px;
  left: 663px;
  position: absolute;
  top: 411px;
  transition: all 0.4s ease;
  width: 29px;
}

.index .vector-3297-3:hover {
  transform: rotate(45deg);
}

.index .frame-1171278700-1 {
  align-self: flex-start;
  background-color: var(--shark-3);
  border-radius: 55px;
  cursor: pointer;
  height: 49px;
  margin-left: 195px;
  margin-top: 278px;
  opacity: 0.3;
  overflow: hidden;
  position: relative;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  width: 108px;
}

.index .frame-1171278700-1.animate-enter6 {
  animation: animate-enter6-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter6-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278700-1:hover {
  transform: scale(1.1);
}

.index .flex-row {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  margin-top: 28px;
  min-width: 1530px;
}

.index .frame-1171278701 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 373px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease;
  width: 755px;
}

.index .frame-1171278701:hover {
  transform: translate(0, -12px);
}

.index .overlap-group8 {
  height: 531px;
  left: 52px;
  position: absolute;
  top: -277px;
  width: 669px;
}

.index .text-12 {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: 39px;
  font-weight: 700;
  left: 0;
  letter-spacing: -1.56px;
  line-height: normal;
  position: absolute;
  top: 323px;
}

.index .text-13 {
  left: 0;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 403px;
  width: 669px;
}

.index .ellipse-8183-7 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 109px;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.index .frame-1171278700-2:hover {
  background-color: #00DAFF
}

.index .text {
  letter-spacing: -0.64px;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-1171278701-1 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 150px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 296px;
  transition: all 0.2s ease;
}

.index .frame-1171278701-1:hover {
  background-color: #00DAFF
}

.index .frame-1171278702 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 219px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 296px;
  transition: all 0.2s ease;
}

.index .frame-1171278702:hover {
  background-color: #00DAFF
}

.index .flex-col-1 {
  align-items: flex-start;
  gap: 20px;
  min-height: 373px;
  width: 755px;
}

.index .frame-container-3 {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  min-width: 753px;
}

.index .frame-1171278702-1:hover {
  transform: translate(0, -8px);
}

.index .overlap-group22 {
  height: 455px;
  margin-left: -32px;
  margin-top: -277px;
  position: relative;
  width: 432px;
}

.index .text-55 {
  left: 159px;
  letter-spacing: -2.24px;
  line-height: normal;
  position: absolute;
  top: 355px;
  white-space: nowrap;
}

.index .number-1 {
  left: 198px;
  letter-spacing: -3.40px;
  position: absolute;
  top: 325px;
}

.index .text-56 {
  left: 154px;
  letter-spacing: -0.80px;
  line-height: 36px;
  position: absolute;
  top: 419px;
  white-space: nowrap;
}

.index .ellipse-8183 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 0;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.index .frame-1171278703 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 244px;
  justify-content: center;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 364px;
}

.index .frame-1171278703:hover {
  transform: translate(0, -8px);
}

.index .overlap-group24 {
  height: 455px;
  margin-top: -277px;
  position: relative;
  width: 432px;
}

.index .text-58 {
  left: 158px;
  letter-spacing: -2.24px;
  line-height: normal;
  position: absolute;
  top: 355px;
  white-space: nowrap;
}

.index .number-2 {
  left: 197px;
  letter-spacing: -3.40px;
  position: absolute;
  top: 325px;
}

.index .text-59 {
  left: 155px;
  letter-spacing: -0.80px;
  line-height: 36px;
  position: absolute;
  top: 419px;
  white-space: nowrap;
}

.index .frame-1171278704 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 109px;
  overflow: hidden;
  padding: 0 161px;
  transition: all 0.2s ease;
  width: 755px;
}

.index .frame-1171278704:hover {
  background-color: #3E3E3E
}

.index .overlap-group23 {
  border-radius: 216px;
  height: 432px;
  margin-top: -277px;
  position: relative;
  width: 432px;
}

.index .percent {
  color: var(--cyan--aqua);
  font-family: var(--font-family-pretendard-semibold);
  font-size: 44px;
  font-weight: 600;
  left: 158px;
  letter-spacing: -1.76px;
  line-height: normal;
  position: absolute;
  top: 287px;
}

.index .text-57 {
  left: 172px;
  letter-spacing: -0.80px;
  line-height: 36px;
  position: absolute;
  top: 337px;
  white-space: nowrap;
}

.index .ellipse-8183-8 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 0;
  opacity: 0.11;
  position: absolute;
  top: 0;
  width: 432px;
}

.index .flex-col-2 {
  align-items: center;
  margin-top: 20px;
  min-height: 5749px;
  width: 1880px;
}

.index .frame-container-4 {
  align-items: flex-start;
  display: flex;
  height: 673px;
  min-width: 1530px;
}

.index .frame-1171278705 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 669px;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 490px;
}

.index .frame-1171278705:hover {
  transform: translate(0, -8px);
}

.index .overlap-group-3 {
  align-self: center;
  height: 433px;
  margin-left: 2.0px;
  margin-top: -277px;
  position: relative;
  width: 436px;
}

.index .text-1 {
  left: 19px;
  letter-spacing: -1.08px;
  line-height: normal;
  position: absolute;
  top: 319px;
  white-space: nowrap;
}

.index .text-2 {
  left: 19px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 369px;
  width: 417px;
}

.index .frame-1171278700 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 39px;
  justify-content: center;
  margin-left: 47px;
  margin-top: 19px;
  overflow: hidden;
  padding: 7px 14px;
  position: relative;
  transition: all 0.2s ease;
  width: 116px;
}

.index .frame-1171278700:hover {
  background-color: #00DAFF
}

.index .text-3 {
  letter-spacing: -0.64px;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-1171278706 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  align-self: flex-end;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 669px;
  margin-left: 34px;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 490px;
}

.index .frame-1171278706:hover {
  transform: translate(0, -8px);
}

.index .overlap-group-container {
  align-items: flex-end;
  background-color: var(--black);
  border: 1px solid;
  border-color: #434343;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: -225px;
  margin-top: 80px;
  min-height: 390px;
  padding: 68.9px 61px;
  width: 659px;
}

.index .overlap-group2 {
  height: 96px;
  margin-right: 7.14px;
  position: relative;
  width: 315px;
}

.index .vector {
  height: 73px;
  left: 11px;
  position: absolute;
  top: 11px;
  width: 58px;
}

.index .vector-1 {
  height: 73px;
  left: 81px;
  position: absolute;
  top: 11px;
  width: 58px;
}

.index .vector-2 {
  height: 73px;
  left: 230px;
  position: absolute;
  top: 11px;
  width: 73px;
}

.index .overlap-group3 {
  height: 125px;
  position: relative;
  width: 334px;
}

.index .frame-1171278709-2 {
  align-items: flex-end;
  display: inline-flex;
  gap: 31px;
  left: 23px;
  position: absolute;
  top: 20px;
}

.index .group-1000001659 {
  align-items: flex-start;
  display: flex;
  gap: 3px;
  height: 40px;
  left: 0;
  min-width: 41px;
  position: absolute;
  top: 0;
}

.index .overlap-group1-2 {
  align-self: center;
  height: 40px;
  margin-bottom: 0;
  position: relative;
  width: 13px;
}

.index .overlap-group-10 {
  align-self: flex-end;
  height: 40px;
  margin-bottom: 0;
  position: relative;
  width: 14px;
}

.index .group-1000001663 {
  align-items: flex-end;
  display: flex;
  height: 39px;
  left: 2px;
  min-width: 40px;
  position: absolute;
  top: 0;
}

.index .overlap-group1-3 {
  height: 39px;
  margin-bottom: 0;
  position: relative;
  width: 40px;
}

.index .overlap-group-11 {
  height: 39px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

.index .overlap-group1-4 {
  height: 39px;
  margin-bottom: 0;
  position: relative;
  width: 51px;
}

.index .overlap-group-12 {
  height: 39px;
  left: 0;
  position: absolute;
  top: 0;
  width: 51px;
}

.index .union {
  height: 39px;
  left: 17px;
  position: absolute;
  top: 0;
  width: 39px;
}

.index .frame-1171278774 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 669px;
  margin-left: 26px;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 490px;
}

.index .frame-1171278774:hover {
  transform: translate(0, -8px);
}

.index .image-1 {
  height: 375px;
  margin-top: 80px;
  object-fit: cover;
  width: 425px;
}

.index .flex-row-1 {
  align-items: center;
  display: flex;
  gap: 258px;
  margin-right: 250.0px;
  margin-top: 116px;
  min-width: 1280px;
}

.index .group-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 237px;
  margin-top: 188.0px;
  min-height: 397px;
  width: 135px;
}

.index .group-117127889 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  width: 135px;
}

.index .number-3 {
  letter-spacing: -1.20px;
  min-height: 36px;
}

.index .text-26 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.index .group-117127889-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  width: 80px;
}

.index .number-4 {
  letter-spacing: -1.20px;
  min-height: 36px;
}

.index .text-31 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.index .overlap-group30 {
  height: 837px;
  position: relative;
  width: 887px;
}

.index .ellipse-8184 {
  background-color: var(--cyan--aqua);
  border-radius: 332px;
  cursor: pointer;
  filter: blur(361.3px);;
  height: 664px;
  left: 40px;
  opacity: 0.04;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: 664px;
}

.index .ellipse-8184:hover {
  transform: scale(2);
}

.index .text-7 {
  left: 242px;
  letter-spacing: -0.72px;
  line-height: 25px;
  position: absolute;
  text-align: center;
  top: 164px;
}

.index .text-10 {
  cursor: pointer;
  left: 250px;
  letter-spacing: -2.24px;
  line-height: normal;
  opacity: 0.3;
  position: absolute;
  text-align: center;
  top: 81px;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  white-space: nowrap;
}

.index .text-10.animate-enter8 {
  animation: animate-enter8-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter8-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .text-10:hover {
  transform: scale(1.1);
}

.index .frame-1171278713:hover {
  background-color: #474747
}

.index .overlap-group1 {
  height: 432px;
  left: 35px;
  position: absolute;
  top: -277px;
  width: 796px;
}

.index .ellipse-8183-1 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 192px;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 432px;
}

.index .text-4 {
  left: 0;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 310px;
  width: 796px;
}

.index .frame-1171278709 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 35px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
  transition: all 0.2s ease;
}

.index .frame-1171278709:hover {
  background-color: #00DAFF
}

.index .frame-1171278710 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 101px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
  transition: all 0.2s ease;
}

.index .frame-1171278710:hover {
  background-color: #00DAFF
}

.index .frame-1171278714:hover {
  background-color: #474747
}

.index .overlap-group-4 {
  height: 432px;
  margin-top: -277px;
  position: relative;
  width: 796px;
}

.index .overlap-group1-1 {
  height: 432px;
  left: 0;
  position: absolute;
  top: 0;
  width: 796px;
}

.index .frame-1171278711-1 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 145px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
  transition: all 0.2s ease;
}

.index .frame-1171278711-1:hover {
  background-color: #00DAFF
}

.index .frame-1171278709-1:hover {
  background-color: #00DAFF
}

.index .frame-1171278710-1 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 79px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
  transition: all 0.2s ease;
}

.index .frame-1171278710-1:hover {
  background-color: #00DAFF
}

.index .flex-col-3 {
  align-items: center;
  margin-top: 79px;
  min-height: 4044px;
  width: 1880px;
}

.index .x-container-1 {
  gap: 313px;
}

.index .number-5 {
  letter-spacing: -1.20px;
  min-height: 36px;
}

.index .text-36 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.index .frame-117127871 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24px;
  cursor: pointer;
  height: 238px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 887px;
}

.index .frame-117127871:hover {
  background-color: #474747
}

.index .frame-1171278710-2 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 114px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
  transition: all 0.2s ease;
}

.index .frame-1171278710-2:hover {
  background-color: #00DAFF
}

.index .frame-1171278711-2 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 298px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
}

.index .x-container-2 {
  gap: 313px;
  margin-top: 79px;
}

.index .number-6 {
  letter-spacing: -1.20px;
  min-height: 36px;
}

.index .text-42 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.index .frame-1171278710-3 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 101px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
}

.index .x-container-3 {
  gap: 258px;
  margin-top: 79px;
}

.index .number-7 {
  letter-spacing: -1.20px;
  min-height: 36px;
}

.index .text-47 {
  letter-spacing: -1.20px;
  line-height: normal;
  min-height: 36px;
  white-space: nowrap;
}

.index .frame-1171278717 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24px;
  cursor: pointer;
  display: flex;
  height: 196px;
  overflow: hidden;
  padding: 0 35px;
  transition: all 0.2s ease;
  width: 887px;
}

.index .frame-1171278717:hover {
  background-color: #474747
}

.index .frame-1171278711-3 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 145px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
}

.index .frame-1171278710-4 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 79px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
}

.index .overlap-group28 {
  height: 763px;
  margin-right: 2.0px;
  margin-top: 258px;
  position: relative;
  width: 1528px;
}

.index .ellipse-8183-9 {
  background-color: var(--cyan--aqua);
  border-radius: 332px;
  cursor: pointer;
  filter: blur(361.3px);;
  height: 664px;
  left: 445px;
  opacity: 0.08;
  position: absolute;
  top: 0;
  transition: all 0.6s ease;
  width: 664px;
}

.index .ellipse-8183-9:hover {
  transform: scale(2);
}

.index .text-8 {
  left: 597px;
  letter-spacing: -0.72px;
  line-height: 25px;
  position: absolute;
  text-align: center;
  top: 131px;
  white-space: nowrap;
}

.index .text-11 {
  cursor: pointer;
  left: 666px;
  letter-spacing: -2.24px;
  line-height: normal;
  opacity: 0.3;
  position: absolute;
  text-align: center;
  top: 50px;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  white-space: nowrap;
}

.index .text-11.animate-enter9 {
  animation: animate-enter9-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter9-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .text-11:hover {
  transform: scale(1.1);
}

.index .frame-1171278720 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 493px;
  left: 0;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 270px;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 490px;
}

.index .frame-1171278720.animate-enter14 {
  animation: animate-enter14-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter14-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278720:hover {
  transform: translate(0, -11px);
}

.index .overlap-group-5 {
  height: 448px;
  left: 28px;
  position: absolute;
  top: -277px;
  width: 432px;
}

.index .text-20 {
  left: 189px;
  letter-spacing: -1.08px;
  line-height: normal;
  position: absolute;
  top: 351px;
  width: 115px;
}

.index .frame-1171278721 {
  align-items: flex-start;
  background-color: var(--white);
  border-radius: 20px;
  display: flex;
  height: 122px;
  left: 6px;
  overflow: hidden;
  position: absolute;
  top: 326px;
  width: 122px;
}

.index .c18-e5683-2-e84-4936 {
  height: 122px;
  width: 122px;
}

.index .text-5 {
  left: 34px;
  letter-spacing: -0.72px;
  line-height: 32px;
  position: absolute;
  top: 211px;
  width: 413px;
}

.index .frame-1171278722.animate-enter15 {
  animation: animate-enter15-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter15-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278722:hover {
  transform: translate(0, -11px);
}

.index .x05-b58-b02-a269-4-f6 {
  height: 181px;
  margin-top: -17px;
  object-fit: cover;
  width: 136px;
}

.index .frame-1171278721-1.animate-enter16 {
  animation: animate-enter16-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter16-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.index .frame-1171278721-1:hover {
  transform: translate(0, -11px);
}

.index .text-60 {
  left: 189px;
  letter-spacing: -1.08px;
  line-height: normal;
  position: absolute;
  top: 351px;
  width: 115px;
}

.index .text-61 {
  left: 189px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 388px;
  width: 230px;
}

.index .x4-beeea4-d-8670-498 {
  height: 181px;
  margin-bottom: -59px;
  object-fit: cover;
  width: 136px;
}

.index .overlap-group27 {
  height: 1019px;
  margin-top: 330px;
  position: relative;
  width: 1880px;
}

.index .x1 {
  border-radius: 30px;
  cursor: pointer;
  height: 975px;
  left: 73px;
  opacity: 0;
  position: absolute;
  top: 44px;
  transform: scale(1.1);
  transition: all 0.2s ease;
  width: 1734px;
}

.index .x1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.index .x1 img {
  object-fit: cover;
}

.index .x1.animate-enter4 {
  animation: animate-enter4-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: scale(1.1);
}

@keyframes animate-enter4-frames {
  from{opacity: 0;
transform: scale(1.1);
}
to{opacity: 1;
transform: scale(1);
}
}

.index .x1:hover {
  background-color: #00DAFF
}

.index .rectangle-3480364 {
  background-color: var(--cod-gray-2);
  height: 1019px;
  left: 0;
  opacity: 0.57;
  position: absolute;
  top: 0;
  width: 1880px;
}

.index .frame-1171278719 {
  align-items: center;
  background-color: var(--white);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  height: 47px;
  justify-content: center;
  left: 859px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 536px;
  transition: all 0.2s ease;
  width: 140px;
}

.index .frame-1171278719:hover {
  background-color: #6e6e6e
}

.index .text-66 {
  color: #020202;
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-xxs);
  font-weight: 600;
  letter-spacing: -0.64px;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .vector-3298-1 {
  height: 16.41px;
  position: relative;
  width: 19.41px;
}

.index .uxui {
  color: var(--white);
  font-family: var(--font-family-pretendard-bold);
  font-size: 56px;
  font-weight: 700;
  left: 562px;
  letter-spacing: -2.24px;
  line-height: 70px;
  position: absolute;
  text-align: center;
  text-shadow: 0px 4px 14.8px #00000040;
  top: 360px;
}

.index .frame-1171278768 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 402px;
  margin-left: 12.0px;
  margin-top: 442px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 1722px;
}

.index .frame-1171278768:hover {
  background-color: #3E3E3E
}

.index .overlap-group26 {
  height: 1024px;
  left: 348px;
  position: absolute;
  top: -882px;
  width: 1037px;
}

.index .ellipse-8183-10 {
  background-color: var(--alto);
  border-radius: 512px;
  filter: blur(284.5px);;
  height: 1024px;
  left: 0;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 1024px;
}

.index .text-65 {
  left: 986px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.index .ui-1 {
  left: 116px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.index .uiux {
  left: 349px;
  letter-spacing: -0.80px;
  line-height: 32px;
  top: 943px;
}

.index .group-1-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  height: 47px;
  left: 49px;
  min-width: 100px;
  position: absolute;
  top: 227px;
  transition: all 0.5s ease;
}

.index .group-1-1:hover {
  transform: scale(1.1);
}

.index .instagram {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 149px;
  width: 87px;
}

.index .a24-1 {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.index .artaloo-1 {
  left: 697px;
  letter-spacing: -0.80px;
  line-height: 32px;
  top: 149px;
  width: 87px;
}

.index .text-63 {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 210px;
  width: 87px;
}

.index .epiphone-1 {
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  top: 210px;
  width: 87px;
}

.index .text-64 {
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 271px;
  width: 87px;
}

.index .artaloo-2 {
  cursor: pointer;
  position: absolute;
}

.index .epiphone-2 {
  cursor: pointer;
  position: absolute;
}

.index .flex-col-4 {
  display: flex;
  flex-direction: column;
}

.index .number-8 {
  line-height: normal;
  white-space: nowrap;
}

.index .tm-2 {
  height: 14px;
  letter-spacing: -0.98px;
  line-height: normal;
  margin-top: 8px;
}

.index .ui-design-3 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 12px;
  min-width: 51px;
  text-align: center;
  white-space: nowrap;
}

.index .uiux-1 {
  position: absolute;
  white-space: nowrap;
}

.index .x-container-4 {
  align-items: flex-start;
  display: flex;
  margin-right: 250.0px;
  min-width: 1280px;
}

.index .x33-3 {
  align-items: flex-end;
  border: 0.49px solid;
  border-color: var(--white);
  display: flex;
  height: 22px;
  overflow: hidden;
  position: absolute;
  width: 83px;
}